<template>
  <!-- <div>
    <div class="search-container" style="float: left; width: 100%; height: 100%;margin-top:10px;margin-left:10px">
      <div class="sheep">

        <span id="earTag">
          {{ form.earTag }}
        </span>
      </div>

      <div class="state">
        <span id="presentState">
          {{ form.presentState }}
        </span>
      </div>

      <div class="time">
        <span id="SheepRecordBreedState">
          {{ form.isPregnancy }}
        </span>
      </div> -->

  <!-- <div class="addr">
        <span style="float: left;">
          <i class="layui-icon layui-icon-face-smile"></i>
        </span>
        <span id="BuildingName">

        </span>
      </div>
      <div class="ear">
        <span>
          <i class="layui-icon layui-icon-face-surprised" style="color:blue;font-size:20px"></i>
          <span id="elEarTag">

          </span>
        </span>
      </div> -->

  <!-- <br>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="电子耳标号">
      {{ form.electEarNum }}
    </el-form-item>
  </el-form>
  <el-form ref="ruleFormRef" :inline="true" :model="form" label-width="auto" class="demo-ruleForm" :size="formSize"
    status-icon>

    <el-form-item label="电子耳标号">
      <el-input v-model="form.electEarNum" placeholder="请输入电子耳标号" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="品种">
      <el-select v-model="form.variety" placeholder="请选择" style="width: 150px;" clearable>
        <el-option label="杜泊" :value="1" />
        <el-option label="澳洲白" :value="2" />
        <el-option label="萨福克" :value="3" />
        <el-option label="杜湖" :value="4" />
        <el-option label="杜杜湖" :value="5" />
        <el-option label="萨杜湖" :value="6" />
        <el-option label="澳湖" :value="7" />
        <el-option label="湖羊" :value="8" />
        <el-option label="澳杜湖" :value="9" />
      </el-select>
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="form.sheepSex" placeholder="请选择" style="width: 150px;" clearable>
        <el-option label="公" :value="true" />
        <el-option label="母" :value="false" />
      </el-select>
    </el-form-item>
    <el-form-item label="父亲耳号">
      <el-input v-model="form.prantEarNum" placeholder="请选择父耳号" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="母亲耳号">
      <el-input v-model="form.matherEarNum" placeholder="请选择母亲耳号" style="width: 200px;" />
    </el-form-item>

    <el-form-item label="出生日期" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker v-model="form.birthDate" type="date" aria-label="Pick a date" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" placeholder="Pick a date" style="width: 200px" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="出生重(公斤)">
      <el-input v-model="form.birthWeight" placeholder="请输入出生重(公斤)" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="出生场地">
      <el-input v-model="form.birthPlace" placeholder="请输入出生场地" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="断奶日龄">
      <el-input v-model="form.ablactationDayold" placeholder="请输入断奶日龄" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="断奶重(公斤)">
      <el-input v-model="form.ablactationWeight" placeholder="请输入出生重(公斤)" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="日龄">
      <el-input v-model="form.sheepfileDayold" placeholder="请输入日龄" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="月龄">
      <el-input v-model="form.sheepfileMonthold" placeholder="请输入月龄" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="同胎数">
      <el-input v-model="form.samechildNumber" placeholder="请输入同胎数" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="生产等级">
      <el-select v-model="form.produceLevel" placeholder="请选择" style="width: 150px;" clearable>
        <el-option label="后背群" :value="1" />
        <el-option label="生产级" :value="2" />
        <el-option label="核心级" :value="3" />
        <el-option label="未定级" :value="4" />
      </el-select>
    </el-form-item>
    <el-form-item label="基因等级">
      <el-select v-model="form.geneticGrade" placeholder="请选择基因等级" style="width: 200px;" clearable>
        <el-option label="后背级" :value="1" />
        <el-option label="核心级" :value="2" />
        <el-option label="生产级" :value="3" />
        <el-option label="未定级" :value="4" />
      </el-select>
    </el-form-item>
    <el-form-item label="销售等级">
      <el-select v-model="form.saleLevel" placeholder="请选择" style="width: 150px;" clearable>
        <el-option label="无" :value="1" />
        <el-option label="未定级" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="繁殖状态">
      <el-select v-model="form.reproductionState" placeholder="请选择" style="width: 150px;" clearable>
        <el-option label="后备空怀" :value="1" />
        <el-option label="返情空怀" :value="2" />
        <el-option label="未孕空怀" :value="3" />
        <el-option label="流产空怀" :value="4" />
        <el-option label="空胎空怀" :value="5" />
        <el-option label="断奶空怀" :value="6" />
        <el-option label="妊娠" :value="7" />
        <el-option label="哺乳" :value="8" />
      </el-select>
    </el-form-item>
    <el-form-item label="当前胎次">
      <el-input v-model="form.newParity" placeholder="请输入当前胎次" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="已产胎次">
      <el-input v-model="form.sumParity" placeholder="请输入已产胎次" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="创建人">
      <el-input v-model="form.createName" placeholder="请输入创建人" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="修改人">
      <el-input v-model="form.updateName" placeholder="请输入修改人" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="创建时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker v-model="form.createTime" type="date" aria-label="Pick a date" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" placeholder="Pick a date" style="width: 200px" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="修改时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker v-model="form.updateTime" type="date" aria-label="Pick a date" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" placeholder="Pick a date" style="width: 200px" />
        </el-form-item>
      </el-col>
    </el-form-item>
  </el-form>
  <el-button type="danger" @click="submitForm(ruleFormRef)">
    ＋ 保存
  </el-button>
  </div>
  </div> -->
  <div>
    <div class="app-container">
      <div class="search-container" style="height: 300px">
        <el-tag class="ear">{{ form.earTag }}</el-tag>
        <el-tag type="success" class="tag"><span style="font-size: 30px; margin-bottom: 10px">●</span>{{
          "在场, 待入场, 销售离场, 死亡离场,淘汰已离场, 调拨离场, 死羔未入场".split(
            ","
          )[form.presentState - 1]
        }}</el-tag>
        <el-tag v-if="form.sheepSex == false" type="success" class="tag1">{{
          "无,后备空怀,返情空怀,未孕空怀,流产空怀,空胎空怀,断奶空怀,妊娠,哺乳".split(
            ","
          )[form.reproductionState]
        }}&ensp;{{ form.reproductionStateNum }}天
          {{
          "无,后备空怀,返情空怀,未孕空怀,流产空怀,空胎空怀,断奶空怀,妊娠,哺乳".split(
            ","
          )[form.reproductionState] == "妊娠"
            ? form.isPregnancy == 0
              ? "未妊检"
              : "已妊检"
            : ""
        }}</el-tag>
        <div class="di">
          <span style="
              color: #6c9fff;
              font-size: 20px;
              font-weight: bold;
              margin-right: 20px;
            ">
            <el-icon>
              <Place />
            </el-icon>
            {{ form.buildingName }} - {{
          form.columnName
        }}
          </span>
          <span style="font-size: 20px; color: #6c9fff">
            电子耳号:
            {{ form.electEarNum }}
          </span>
        </div>
        <el-row style="margin-bottom: 5px" :gutter="0">
          <el-col :span="4">&emsp;&emsp;品种：{{
          "杜泊,澳洲白,萨福克,杜湖,杜杜湖,萨杜湖,澳湖,湖羊,澳杜湖".split(
            ","
          )[form.variety - 1]
        }}
          </el-col>
          <el-col :span="4">&emsp;&emsp;性别：{{
          form.sheepSex ? "公" : "母"
        }}</el-col>
          <el-col :span="4">&emsp;父耳号：
            <el-tag type="primary">
              {{
          form.prantEarNum
            ? form.prantEarNum
            : "无"
        }}
            </el-tag>
          </el-col>
          <el-col :span="4">&emsp;母耳号：
            <el-tag type="success">
              {{
          form.matherEarNum
            ? form.matherEarNum
            : "无"
        }}
            </el-tag>
          </el-col>
          <el-col :span="4">出生日期：{{
          moment(form.birthDate).format("YYYY-MM-DD")
        }}</el-col>
          <el-col :span="4">&emsp;出生重：{{ form.birthWeight + "公斤" }}</el-col>
        </el-row>
        <el-row style="margin-bottom: 5px" :gutter="0">
          <el-col :span="4">出生场地：{{ form.birthPlace }}</el-col>
          <el-col :span="4">断奶日龄：{{ form.ablactationDayold }}天</el-col>
          <el-col :span="4">&emsp;断奶重：{{
          form.ablactationWeight != null
            ? form.ablactationWeight + "公斤"
            : ""
        }}</el-col>
          <el-col :span="4">&emsp;&emsp;日龄：{{ form.sheepfileDayold }}天</el-col>
          <el-col :span="4">&emsp;&emsp;月龄：{{ form.sheepfileMonthold }}月</el-col>
          <el-col v-if="form.sheepSex == false" :span="4">&emsp;同胎数：{{
          form.samechildNumber != null
            ? "未知,一只,两只,三只,四只,五只".split(",")[
            form.samechildNumber - 1
            ]
            : ""
        }}</el-col>
        </el-row>
        <el-row style="margin-bottom: 5px" :gutter="0">
          <el-col :span="4">生产等级：{{
          "后备级别,核心级,生产级,未定级".split(",")[
          form.produceLevel - 1
          ]
        }} </el-col>
          <el-col :span="4">基因等级：
            {{
          "后备级别,核心级,生产级,未定级".split(",")[
          form.geneticGrade - 1
          ]
        }}</el-col>
          <el-col :span="4">销售等级：{{
          "无,未定级".split(",")[
          form.saleLevel - 1
          ]
        }}</el-col>
          <el-col :span="4" v-if="form.sheepSex == false">繁殖方法：{{
          form.reproductionState != null
            ? " 鲜精_阴道 ,鲜精_子宫角,冻精_阴道,冻精_子宫角,模糊本交,精准本交".split(
              ","
            )[form.reproductionState - 1]
            : ""
        }}</el-col>
        </el-row>
        <!-- 性别为母的时候显示 -->
        <el-row style="margin-bottom: 5px" v-if="form.sheepSex == false" :gutter="0">
          <el-col :span="4">当前胎次：{{ form.newParity }}
          </el-col>
          <el-col :span="4">已产胎次：{{ form.sumParity }}</el-col>
          <el-col :span="4">配种序号：</el-col>
        </el-row>
        <el-row style="margin-bottom: 5px" :gutter="0">
          <el-col :span="4">&emsp;创建人： </el-col>
          <el-col :span="4">&emsp;修改人：</el-col>
          <el-col :span="4">创建时间：{{
          moment(form.createTime).format("YYYY-MM-DD")
        }}</el-col>
          <el-col :span="4">修改时间：{{
          form.updateTime != null
            ? moment(form.updateTime).format("YYYY-MM-DD")
            : ""
        }}</el-col>
        </el-row>
      </div>
      <el-card shadow="never" class="table-container" style="margin-top: 10px; height: 460px">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="系谱" name="genealogy">
            <el-alert :closable="false" title="系谱信息" style="color: #54a1fe; background-color: #e9f2fe" />
            <Genealogy v-if="activeName == 'genealogy'" :id="id" />
          </el-tab-pane>
          <!-- <el-tab-pane label="转舍记录" name="sheepRescission">
            <SheepRescission :id="id" :ear="form.earTag" v-if="activeName == 'sheepRescission'" />
          </el-tab-pane> -->
        </el-tabs>
      </el-card>
    </div>
  </div>

</template>
<script setup lang="ts">
import sheepfile from '@/api/ProductionManagement/index'
import { Addsheepfile } from '@/api/ProductionManagement/model'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import type { TabsPaneContext } from "element-plus";
import { useRoute } from 'vue-router'
import moment from "moment";
import Genealogy from "./Info.vue";
const route = useRoute()


const activeName = ref("genealogy");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.props.name;
};


//参数
const form = reactive({
  "sheepFileId": 0,
  "earTag": "",
  "variety": 0,
  "sheepSex": false,
  "electEarNum": "",
  "geneticGrade": "",
  "prantEarNum": "",
  "matherEarNum": "",
  "buildingId": 0,
  "columnId": 0,
  "birthDate": "2024-08-10 10:59:43",
  "birthPlace": "",
  "birthWeight": 0,
  "ablactationWeight": 0,
  "ablactationDate": "2020-08-20 10:59:43",
  "ablactationDayold": 0,
  "sheepfileDayold": 0,
  "sheepfileMonthold": 0,
  "samechildNumber": 0,
  "produceLevel": 0,
  "saleLevel": 0,
  "reproductionState": 0,
  "newParity": 0,
  "sumParity": 0,
  "createName": "",
  "createTime": "2020-08-22 22:00:11",
  "updateName": "",
  "updateTime": "2022-08-26 22:01:04",
  "presentState": 1,
  "isPregnancy": 0,
  "buildingName": "",
  "columnName": "",
  reproductionStateNum: ""
})



//反填方法
const listsheepfile = async () => {
  sheepfile.listsheepfile(route.params.sheepFileId)
    .then(res => {
      form.sheepFileId = res.data.sheepFileId
      form.earTag = res.data.earTag
      form.variety = res.data.variety
      form.sheepSex = res.data.sheepSex
      form.electEarNum = res.data.electEarNum
      form.geneticGrade = res.data.geneticGrade
      form.prantEarNum = res.data.prantEarNum
      form.matherEarNum = res.data.matherEarNum
      form.buildingId = res.data.buildingId
      form.columnId = res.data.columnId
      form.birthDate = res.data.birthDate
      form.birthPlace = res.data.birthPlace
      form.birthWeight = res.data.birthWeight
      form.ablactationDate = res.data.ablactationDate
      form.ablactationWeight = res.data.ablactationWeight
      form.ablactationDayold = res.data.ablactationDayold
      form.sheepfileDayold = res.data.sheepfileDayold
      form.sheepfileMonthold = res.data.sheepfileMonthold
      form.samechildNumber = res.data.samechildNumber
      form.produceLevel = res.data.produceLevel
      form.saleLevel = res.data.saleLevel
      form.reproductionState = res.data.reproductionState
      form.newParity = res.data.newParity
      form.sumParity = res.data.sumParity
      form.createName = res.data.createName
      form.createTime = res.data.createTime
      form.updateName = res.data.updateName
      form.updateTime = res.data.updateTime
      form.presentState = res.data.presentState
      form.isPregnancy = res.data.isPregnancy
      form.buildingName = res.data.buildingName
      form.columnName = res.data.columnName
      form.reproductionStateNum = res.data.reproductionStateNum
      console.log(res)
    })

}



onMounted(() => {
  listsheepfile()
})
</script>


<style scoped>
.ear {
  color: #fff;
  border: 0px solid #fff;
  background: repeating-linear-gradient(to right, #ff855f, #e94848);
  border-radius: 25px 0px 25px 0px;
  font-weight: bold;
  font-size: 28px;
  height: 50px;
  width: 180px;
  text-align: center;
  margin-right: 25px;
}

.tag {
  height: 40px;
  width: 160px;
  border-radius: 25px 25px 25px 25px;
  font-size: 20px;
  background-color: #eafaee;
  margin-right: 20px;
}

.tag1 {
  height: 40px;
  width: 180px;
  font-size: 20px;
  background-color: #fff;
  color: #fc8d5d;
  border: 2px solid #fee3c0;
  margin-right: 20px;
}

.di {
  display: flex;
  align-items: center;
  width: 100%;
  height: 70px;
}

:deep.el-tabs__nav-scroll {
  margin-left: 500px;
}
</style>
